Progression du Fetch en Arrière-Plan Frontend : Suivi de la Progression du Téléchargement

Dans les applications web modernes, la récupération de données depuis des serveurs distants est une exigence fondamentale. Qu'il s'agisse de télécharger de gros fichiers, de récupérer des réponses d'API ou simplement de mettre à jour les données de l'application, les utilisateurs s'attendent à une expérience fluide et informative. Un aspect crucial de cela est de fournir un retour d'information pendant les opérations de fetch en arrière-plan, en particulier concernant la progression du téléchargement. Cet article explore les techniques pour suivre la progression du téléchargement côté frontend, améliorant l'expérience utilisateur et offrant des informations précieuses sur les processus de transfert de données.

Pourquoi le Suivi de la Progression du Téléchargement est Important

Imaginez télécharger une grande image, un document ou un ensemble de données complet. Sans aucune indication de progression, l'utilisateur est laissé dans l'ignorance, ne sachant pas si l'application fonctionne, est gelée ou rencontre un problème de connexion. Ce manque de retour peut entraîner de la frustration, des téléchargements abandonnés et une expérience utilisateur négative. Le suivi de la progression du téléchargement résout ce problème en :

• Améliorant l'Expérience Utilisateur : Fournir des indices visuels, tels que des barres de progression ou des indicateurs de pourcentage, rassure les utilisateurs que quelque chose se passe et estime le temps de téléchargement restant.
• Améliorant la Transparence : Afficher la progression du téléchargement aide les utilisateurs à comprendre la quantité de données transférées et ce qu'il reste.
• Facilitant la Gestion des Erreurs : Surveiller la progression permet aux développeurs de détecter les problèmes potentiels, comme les erreurs réseau ou les connexions lentes, et de mettre en œuvre des mécanismes de gestion des erreurs appropriés. Cela empêche l'application de paraître défectueuse et permet des stratégies de récupération d'erreur plus robustes.
• Augmentant la Performance Perçue : Même si le téléchargement lui-même prend du temps, les mises à jour de la progression créent une perception de réactivité et d'efficacité, rendant l'application plus soignée.

L'API Fetch et les Événements de Progression

L'API Fetch est la méthode moderne et préférée pour effectuer des requêtes réseau dans les navigateurs web. Elle offre un moyen puissant et flexible de gérer la récupération de données. Malheureusement, l'API Fetch standard, en elle-même, ne fournit pas directement d'accès aux événements de progression du téléchargement. Cependant, nous pouvons tirer parti de techniques pour y parvenir. Spécifiquement, en utilisant XMLHttpRequest (XHR) ou en exploitant les réponses en streaming.

Utiliser XMLHttpRequest pour le Suivi de Progression

Bien que Fetch soit la méthode préférée, XMLHttpRequest (XHR) offre un contrôle plus granulaire sur le cycle de vie de la requête, y compris l'accès aux événements de progression. Voici un exemple de base pour suivre la progression du téléchargement en utilisant XHR :

            
function trackDownloadProgress(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      callback(percentComplete);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      // Success
      callback(100);
      // Process the response
    } else {
      // Error
      callback(-1, xhr.status); // Indicate an error
    }
  };

  xhr.onerror = () => {
    callback(-1, 'Network Error'); // Indicate a network error
  };

  xhr.send();
}

// Example usage:
trackDownloadProgress('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

Dans ce code :

• Nous créons un objet XMLHttpRequest.
• Nous utilisons xhr.open() pour spécifier la méthode, l'URL et si la requête doit être asynchrone (true).
• xhr.onprogress est un gestionnaire d'événements qui est déclenché périodiquement à mesure que le téléchargement progresse. event.loaded représente la quantité de données téléchargées jusqu'à présent, et event.total représente la taille totale de la ressource (si le serveur fournit l'en-tête Content-Length).
• Nous calculons le pourcentage d'achèvement en utilisant (event.loaded / event.total) * 100.
• xhr.onload est appelé lorsque le téléchargement est terminé (ou que la requête a réussi). Nous vérifions le xhr.status pour déterminer le résultat (par exemple, 200 pour un succès).
• xhr.onerror gère les erreurs potentielles de réseau ou de connexion.
• Nous passons le pourcentage de progression à la fonction callback pour mettre à jour l'interface utilisateur. Une erreur est indiquée par -1 pour la progression et la raison.

Remarque : event.total peut être 0 si le serveur ne fournit pas l'en-tête Content-Length. Dans de tels cas, le suivi de la progression est limité, et vous ne pourrez peut-être afficher qu'un indicateur de progression indéterminé (par exemple, une roue qui tourne).

Suivi de Progression avec Fetch et les Réponses en Streaming

Les navigateurs modernes permettent de streamer la réponse, ce qui fournit une solution similaire à la technique XHR. C'est particulièrement utile pour traiter de gros fichiers. L'idée principale est de lire la réponse comme un flux et d'utiliser un ReadableStream pour surveiller les morceaux de données à mesure qu'ils arrivent.

            
async function trackDownloadProgressFetch(url, callback) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        callback(100); // Download complete
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      callback(progress);
    }

  } catch (error) {
    console.error('Download error:', error);
    callback(-1, error.message); // Indicate an error
  }
}

// Example usage:
trackDownloadProgressFetch('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

Voici comment ce code fonctionne :

• Nous utilisons fetch() pour initier la requête.
• Nous vérifions response.ok (statut dans la plage 200-299).
• Nous obtenons l'en-tête content-length de la réponse pour déterminer la taille du fichier.
• response.body est un ReadableStream représentant le corps de la réponse. Nous obtenons un reader pour ce flux.
• Nous appelons à plusieurs reprises reader.read() pour lire des morceaux de données du flux.
• done indique si le flux a été entièrement lu. Si `done` est vrai, le téléchargement est terminé.
• value est un ArrayBuffer contenant le morceau de données actuel.
• Nous mettons à jour les loadedBytes et calculons la progression.
• Nous appelons la fonction de rappel pour mettre à jour l'interface utilisateur.

Cette méthode offre une approche plus moderne qui offre de meilleures performances lors du traitement de gros fichiers, car vous ne chargez pas l'intégralité du fichier en mémoire en une seule fois.

Implémenter une Interface Utilisateur pour la Progression du Téléchargement

Une fois que vous avez les données de progression, l'étape suivante consiste à créer une interface utilisateur (UI) qui communique efficacement l'état du téléchargement. Voici quelques éléments d'interface utilisateur et meilleures pratiques :

Barres de Progression

Les barres de progression sont le moyen le plus courant et le plus intuitif d'afficher la progression du téléchargement. Elles représentent visuellement le pourcentage de données téléchargées. La barre de progression doit :

• Indiquer clairement le pourcentage de progression, soit numériquement, soit visuellement.
• Utiliser des couleurs et des styles qui correspondent au design de votre application.
• Envisager d'ajouter une estimation du temps restant basée sur le débit de téléchargement, si disponible.

            
<div class="progress-container">
  <div class="progress-bar" style="width: 0%;"></div>
  <span class="progress-text">0%</span>
</div>

            

              
                Copy
              
            
          

            
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  width: 0%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

            
function updateProgressBar(progress) {
  const progressBar = document.querySelector('.progress-bar');
  const progressText = document.querySelector('.progress-text');

  if (progress === -1) {
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = 'red';
    progressText.textContent = 'Error';
    return;
  }

  progressBar.style.width = progress + '%';
  progressText.textContent = progress.toFixed(0) + '%';
}

// Call updateProgressBar(progress) within your download progress callback.

            

              
                Copy
              
            
          

Spinners/Indicateurs Indéterminés

Lorsque la taille totale du fichier n'est pas connue (par exemple, le serveur ne fournit pas l'en-tête `Content-Length`), vous pouvez utiliser un indicateur de progression indéterminé, comme un spinner ou une animation de chargement. Cela signale que le téléchargement est en cours, même si vous ne pouvez pas fournir de pourcentage.

Messages de Statut

Afficher des messages textuels qui indiquent l'état du téléchargement apporte clarté et contexte. Ces messages peuvent inclure :

• 'Démarrage du téléchargement...' (État initial)
• 'Téléchargement en cours...' (Pendant le téléchargement)
• '50 % téléchargé...' (Pendant la progression)
• 'Téléchargement terminé !' (En cas de succès)
• 'Échec du téléchargement. Veuillez réessayer.' (En cas d'erreur)

Gestion des Erreurs

Une gestion robuste des erreurs est vitale. Gérez les erreurs potentielles avec élégance en :

• Affichant des messages d'erreur informatifs à l'utilisateur.
• Permettant à l'utilisateur de réessayer le téléchargement.
• Enregistrant les erreurs pour le débogage.

Meilleures Pratiques pour le Suivi de la Progression du Téléchargement Frontend

• Tenir Compte des Conditions Réseau de l'Utilisateur : Des connexions réseau lentes ou peu fiables peuvent entraîner de longs temps de téléchargement. Fournissez un retour qui tient compte de ces conditions. Vous pourriez calculer le temps restant estimé (bien que cela puisse être imprécis avec des vitesses réseau variables) et afficher un message comme 'Téléchargement en cours... Cela peut prendre quelques minutes'.
• Limiter les Mises à Jour : Évitez de mettre à jour l'interface utilisateur trop fréquemment, car cela peut avoir un impact sur les performances. Mettez à jour la barre de progression à intervalles réguliers (par exemple, toutes les 100-200 millisecondes) ou uniquement lorsque la progression change de manière significative.
• Fournir un Retour Visuel Clair : Utilisez une barre de progression ou un spinner clair et concis. Facilitez la compréhension de l'état du téléchargement. Pensez à utiliser des couleurs cohérentes avec l'image de marque de votre application.
• Gérer Différents Types de Fichiers : Assurez-vous que votre suivi de progression gère correctement divers types de fichiers (images, documents, vidéos, etc.). Pensez à afficher une icône appropriée pour le type de fichier.
• Internationalisation (i18n) : Traduisez tous les éléments de l'interface utilisateur (messages de progression, messages d'erreur, etc.) en plusieurs langues pour soutenir un public mondial. Utilisez une bibliothèque ou un service de traduction pour gérer vos traductions. Par exemple, un message de progression peut devoir être traduit : "Downloading..." en plusieurs langues pour une internationalisation correcte.
• Accessibilité : Assurez-vous que vos indicateurs de progression sont accessibles aux utilisateurs handicapés. Utilisez des attributs ARIA (par exemple, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`) pour fournir des informations sémantiques aux lecteurs d'écran.
• Tests : Testez minutieusement votre implémentation de suivi de la progression du téléchargement dans diverses conditions réseau (lentes, rapides, instables) et sur différents appareils. Testez avec une gamme de tailles de fichiers pour vous assurer que le système fonctionne comme prévu.
• Mise en Cache : Mettez en œuvre des stratégies de mise en cache pour améliorer les performances des fichiers fréquemment téléchargés. La mise en cache du navigateur et la mise en cache côté serveur peuvent réduire la nécessité de retélécharger des fichiers, améliorant ainsi la réactivité perçue de votre application.
• Prendre en Compte les Limites de Taille de Fichier : Soyez conscient de la taille des fichiers que vous autorisez à télécharger. Pour les fichiers volumineux, envisagez de diviser le téléchargement en morceaux plus petits et plus gérables, en particulier sur les appareils mobiles. Affichez des avertissements à l'utilisateur s'il est sur le point de télécharger un fichier très volumineux qui pourrait consommer son forfait de données.
• Rapport d'Erreurs : Mettez en œuvre des mécanismes de rapport d'erreurs pour capturer et enregistrer les erreurs de téléchargement à des fins de débogage et de surveillance. Utilisez des outils comme Sentry ou Rollbar pour collecter les données d'erreur.

Techniques Avancées et Considérations

Web Workers pour les Opérations en Arrière-Plan

Pour éviter de bloquer le thread principal et garantir la réactivité de l'interface utilisateur, envisagez d'utiliser des Web Workers pour effectuer l'opération de téléchargement en arrière-plan. Cela maintient votre interface utilisateur fluide et empêche le navigateur de se figer pendant le téléchargement. Le Web Worker peut communiquer les mises à jour de la progression au thread principal en utilisant postMessage().

            
// In your main script (e.g., main.js)
const worker = new Worker('download-worker.js');

worker.postMessage({ url: 'https://example.com/your-large-file.zip' });

worker.onmessage = (event) => {
  if (event.data.type === 'progress') {
    updateProgressBar(event.data.progress);
  } else if (event.data.type === 'error') {
    console.error('Download Error:', event.data.error);
    // Handle error
  } else if (event.data.type === 'complete') {
    console.log('Download Complete!');
    // Handle completion
  }
};

            

              
                Copy
              
            
          

            
// In your worker script (e.g., download-worker.js)
self.onmessage = async (event) => {
  const { url } = event.data;
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        self.postMessage({ type: 'complete' });
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      self.postMessage({ type: 'progress', progress: progress });
    }

  } catch (error) {
    self.postMessage({ type: 'error', error: error.message });
  }
};

            

              
                Copy
              
            
          

Téléchargements Reprenables

Pour les fichiers volumineux, envisagez de mettre en œuvre des téléchargements reprenables. Cela permet à l'utilisateur de mettre en pause et de reprendre le téléchargement plus tard. Implémentez l'en-tête `Range` dans votre requête HTTP pour spécifier la plage d'octets à télécharger. Le serveur répond alors avec la partie demandée du fichier, et le navigateur peut reprendre là où il s'est arrêté. Cela offre une résilience contre les interruptions réseau.

Encodage Morcelé (Chunked Encoding)

Lors de l'utilisation de l'encodage morcelé, l'en-tête `Content-Length` ne sera pas présent. Vous voudrez probablement indiquer une progression indéterminée à l'utilisateur ou utiliser une méthode hybride où la taille est approximée au tout début. C'est généralement le cas lors de l'utilisation d'un service de streaming, où la taille n'est pas immédiatement connue, comme un flux vidéo en direct.

Partage de Ressources entre Origines Multiples (CORS)

Lors du téléchargement de ressources depuis une origine différente (domaine, protocole ou port), assurez-vous que le serveur prend en charge CORS. Le serveur doit inclure l'en-tête `Access-Control-Allow-Origin` dans sa réponse pour autoriser les requêtes inter-origines. Sinon, vos requêtes de téléchargement pourraient être bloquées par le navigateur.

Compatibilité des Navigateurs

Assurez-vous que votre implémentation fonctionne sur différents navigateurs et appareils. Testez votre suivi de progression de téléchargement sur des navigateurs populaires comme Chrome, Firefox, Safari, Edge, et sur des appareils mobiles (iOS et Android). Pensez à utiliser des polyfills ou la détection de fonctionnalités pour prendre en charge les navigateurs plus anciens qui pourraient ne pas supporter pleinement toutes les fonctionnalités.

Exemples du Monde Réel

Examinons quelques exemples concrets de l'utilisation efficace du suivi de la progression du téléchargement :

• Plateformes de Partage de Fichiers : Des plateformes comme Google Drive, Dropbox et WeTransfer utilisent des barres de progression pour montrer la progression des téléversements et des téléchargements de fichiers. Elles fournissent souvent une estimation du temps restant et une gestion des erreurs pour une expérience utilisateur fluide.
• Sites de Téléchargement de Logiciels : De nombreux sites de téléchargement de logiciels affichent des barres de progression pendant le processus de téléchargement. Ces barres aident les utilisateurs à rester informés de la progression du téléchargement et à estimer le temps qu'il faudra pour le terminer. Des sites comme le site de téléchargement officiel de Mozilla Firefox utilisent des barres de progression.
• Plateformes d'Apprentissage en Ligne : Les plateformes d'apprentissage en ligne qui fournissent du contenu vidéo ou documentaire utilisent le suivi de la progression pour afficher l'état du téléchargement des supports pédagogiques.
• Services de Streaming : Les services de streaming affichent parfois la progression pour le pré-chargement ou la mise en cache du contenu. Cela améliore les performances de lecture.
• Sites de Commerce Électronique : Les sites de commerce électronique utilisent le suivi de la progression lors du téléchargement d'images de produits ou d'autres ressources.

Conclusion

La mise en œuvre du suivi de la progression du téléchargement côté frontend est essentielle pour créer une expérience utilisateur positive et informative. En fournissant un retour visuel, en gérant les erreurs et en tenant compte de l'internationalisation et de l'accessibilité, vous pouvez créer des applications web plus conviviales et fiables. L'utilisation de l'API Fetch ou de XMLHttpRequest, ainsi que des éléments d'interface utilisateur et des meilleures pratiques appropriés, permet aux développeurs de fournir des retours cruciaux pendant les opérations de fetch en arrière-plan, garantissant une expérience plus fluide et plus engageante pour les utilisateurs du monde entier. N'oubliez pas de prendre en compte les différentes conditions réseau, les types de fichiers et la compatibilité des navigateurs lors de la conception de votre implémentation.